import styled from "styled-components";

export const Left3Warpper = styled.div`
.content{
    display: flex;
    height: 100%;
    padding: 16px;
    .item-container{
        /* width: 154px; */
        flex: 1;
        height: 210px;
        background: url(${require('@/assets/img/left3-item-bg.png').default}) no-repeat;
        background-size: 100% 100%;
        margin-right: 16px;

        &:last-child{
            margin: 0;
        }
        .header{
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            .title{
                font-size: 14px;
                color: #FFFFFF;
                line-height: 17px;
            }
            .btn{
                font-size: 12px;
                color: #8CB1E8;
                cursor: pointer;
            }
        }
        .icon{
            width: 100%;
            height: 106px;
            padding: 0px 16px;
            img{
                width: 100%;height: 100%;
            }
        }
        .num{
            text-align: center;
            font-size: 20px;
            line-height: 24px;
            padding-top: 8px;
            ${props => props.theme.mixin.ellipsisLine1}
        }
        .sub-title{
            text-align: center;   
            font-size: 14px;
            line-height: 28px;
            color: #96AFD5;
            ${props => props.theme.mixin.ellipsisLine1}
        }
    }
}
`